import { Component } from "react"


// 总结类组件：
//    1）组件名必须大写
//    2）类组件中必须要写一个render函数，是一个生命周期钩子函数
//    3）有this，有state，有生命周期函数，有ref，有上下文，强大
//    4）性能比函数式组件差一点，类组件的写法是之前的主流写法

class DemoA extends Component {
  // 当new DemoA时，会自动调用constructor
  // 这个组件，我们不会去new，React帮我们去new
  constructor() {
    super(); // 调用父组件的constructor
    console.log("constructor...");

    // 定义状态
    this.state = {
      number: 1
    }
  }
  // 类似于vue中的mounted
  componentDidMount() {
    console.log("componentDidMount");
    this.refs.box.style.color = "red";
  }
  add() {
    // console.log("add...");
    // 在这个方法中，需要改变状态，目的是更新视图
    // vue: MVVM  this.number++
    // react: setState

    // console.log("this:", this);

    // 暴力修改状态，状态变了，但是视图没有更新
    // this.state.number++;
    // console.log(this.state.number);

    // 修改状态有一个专属的方法，叫setState，小程序中叫setData
    this.setState({
      number: this.state.number + 1
    })
  }

  // 当调用了setState，会重新render。
  render() {
    // 类组件中有this
    // console.log("this:", this);
    // console.log("render....");


    let { number } = this.state;
    let { a, b } = this.props;

    return (
      // 在jsx中，要写js代码，需要把js代码放到{}
      <div>
        我是类组件
        <hr />
        <p>{a} -- {b}</p>
        <hr />
        {/* 把ref写在普通的标签上，目的是为了获取dom */}
        <p ref="box">{number}</p>
        <button onClick={this.add.bind(this)}>+1</button>
      </div>
    )
  }
}

export default DemoA;